<!-- 
  几个注意点
  0. 首页展示和我的展示是否要一样? 待定
      首页要展示用户名, 而我的不用
      首页用发布时间排序, 我的用记录时间排序
  1. 标题有才显示
  2. 视频记录首帧, 展示在图片后面是最好的方式, 但工作量大
      现在采用更多来下拉展示
 -->
<script lang="ts" setup>
import { Share, Lock, Unlock, Delete, Edit } from '@element-plus/icons-vue'
import LogContent from './comp/LogContent.vue'
import LogTags from './comp/LogTags.vue'
import LogBottom from './comp/LogBottom.vue'
import { vDblclick } from '@mylog-full/mix/utils'

const { log } = defineProps<{
  log: Log
  /** Log的展示方式 */
  type?: 'home' | 'share'
}>()

const { logsMap } = refsMylogStore()

// 双击log，展开和收起
const isExpand = ref(false)
provide('isExpand', isExpand)
const expand = () => (isExpand.value = !isExpand.value)

// 删除log，todo 防暴击，加载态
const onDeleteLog = async () => {
  const logDel = await deleteLog(log)
  if (logDel?.id) {
    ElMessage({ message: '删除成功：' + logDel?.id, type: 'success' })
    delete logsMap.value[logDel.id]
  }
}
// 点击编辑按钮
const isEdit = ref(false)

// 公开log
const onTogglePublic = async () => {
  const logNew = await editLog(log, {
    type: log.type === 'public' ? 'log' : 'public',
  })
  if (logNew?.id) {
    ElMessage({ message: '修改成功：' + logNew?.id, type: 'success' })
    logsMap.value[logNew.id] = logNew
  }
}
</script>

<template>
  <div class="Log _m" :id="`log${log.id}`" v-dblclick="expand">
    <LogContent :log />
    <!-- <LogMedias :log /> -->
    <!-- 图片和视频放在一起 -->
    <div class="medias">
      <ViewerImgs v-if="log.imgs.length" :data="log.imgs" :log />
      <ViewerVideos v-if="log.videos.length" :data="log.videos" :log />
    </div>
    <!-- 音频 和 文件 -->
    <template v-if="isExpand">
      <div v-if="log.audios.length">音频：{{ log.audios }}</div>
      <ViewerFiles v-if="log.files.length" :data="log.files" :log>
        文件：{{ log.files }}
      </ViewerFiles>
    </template>
    <LogTags :log :hide-public="type !== undefined" />
    <LogBottom :log :show-username="!!type" />

    <LogEdit v-if="isEdit" :log @success="isEdit = false" />

    <ElButtonGroup
      v-if="type !== 'home' && type !== 'share'"
      v-show="isExpand"
      class="buttons"
    >
      <ElButton :icon="Share" />
      <ElButton
        :icon="log.type === 'public' ? Unlock : Lock"
        @click="onTogglePublic"
      />
      <ElButton :icon="Edit" @click="isEdit = !isEdit" />
      <ElButton :icon="Delete" @click="onDeleteLog" />
    </ElButtonGroup>

    <slot name="bottom" />
  </div>
</template>

<style lang="scss" scoped>
.Log {
  border-radius: var(--border-radius);
  padding: var(--padding);

  display: flex;
  flex-direction: column;
  gap: 4px;

  .medias {
    --block-height: 6rem;
    --block-border-radius: 6px;
    --block-gap: 2px;

    display: flex;
    flex-wrap: wrap;
    gap: var(--block-gap);
  }

  .LogEdit {
    margin-top: 4px;
  }

  // 空div应该不占用gap
  > div:empty {
    display: none;
  }

  .buttons {
    // display: none;
    position: absolute;
    top: -26px;
    right: var(--padding);
  }

  &:hover .buttons {
    // display: block;
  }
}
</style>
